<template>
  <div id="blog">
    <div class="back">
      <div class="back-content" @click="$router.back()">
        <a-icon type="left" />
        <span>返回</span>
      </div>

      <div class="oprate-wrap">
        <a-input-search placeholder="请输入搜索标题..." style="width: 200px" @search="onSearch" class="ele" />
        <router-link to="/blog/create">
          <a-button type="primary" class="ele"> 创建 </a-button>
        </router-link>
      </div>
    </div>

    <a-table :columns="columns" v-if="data" :data-source="data.data" bordered :pagination="pagination" @change="handleTableChange">
      <div slot="create_time" slot-scope="text">
        {{ timestampToDate(text) }}
      </div>
      <div slot="update_time" slot-scope="text">
        {{ timestampToDate(text) }}
      </div>
      <div slot="operation" slot-scope="text, record" class="blog-list-option">
        <a-popconfirm :title="`您确定要${record.hidden === '0' ? '删除' : '恢复'}吗?`" @confirm="() => onSwitch(record)">
          <a v-if="record.hidden === '0'" href="javascript:;">删除</a>
          <a v-if="record.hidden === '1'" href="javascript:;">恢复</a>
        </a-popconfirm>

        <a href="javascript:;" @click="() => onUpdate(record)">更新</a>
      </div>
    </a-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
      columns,
      pagination: {}
    }
  },
  created() {
    this.getBlogList()
  },
  methods: {
    getBlogList() {
      let data = {
        page: this.pagination.current ? this.pagination.current : 1,
        type: 'all',
        admin: '1'
      }
      this.$api.getBlog(data).then((res) => {
        if (res.code === 1) {
          this.data = res.data
          this.pagination = {
            total: res.data.total,
            current: res.data.current_page,
            pageSize: res.pageSize,
            position: 'bottom'
          }
          console.log(this.pagination)
        }
      })
    },

    // 分页
    handleTableChange(pagination) {
      this.pagination = pagination
      this.getBlogList()
    },

    // 搜索
    onSearch() {},

    // 切换删除
    onSwitch(item) {
      this.$api
        .switchBlog({
          uuid: item.uu_id
        })
        .then((res) => {
          if (res.code === 1) {
            this.$message.success('操作成功')
            this.getBlogList()
          }
        })
    },

    // 更新
    onUpdate(item) {
      this.$router.push({
        name: 'blogCreate',
        query: {
          uuid: item.uu_id
        }
      })
    }
  }
}

const columns = [
  {
    title: '创建时间',
    dataIndex: 'create_time',
    key: 'create_time',
    scopedSlots: { customRender: 'create_time' }
  },
  {
    title: '更新时间',
    dataIndex: 'update_time',
    key: 'update_time',
    scopedSlots: { customRender: 'update_time' }
  },
  {
    title: '标题',
    dataIndex: 'title',
    key: 'title'
  },
  {
    title: '副标题',
    dataIndex: 'sub_description',
    key: 'sub_description'
  },
  {
    title: '浏览次数',
    dataIndex: 'view',
    key: 'view'
  },
  {
    title: '喜欢',
    dataIndex: 'like',
    key: 'like'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    width: 140,
    scopedSlots: { customRender: 'operation' }
  }
]
</script>

<style lang="less" scoped>
#blog {
  .blog-list-option {
    a {
      margin-right: 10px;
    }
  }
}
</style>
